<template>
    <div class="resultPage">
      <div class="filterVue">
        <div style="display: flex">
          <div class="filter">
            <span style="padding-right: 10px">盘点门仓</span>
            <el-cascader
            v-model="storeId"
            :options="storeList"
            :props="{ expandTrigger: 'hover', value: 'id', label: 'name' }"
            @change="handleTransferOutStoreChange"
          ></el-cascader>
          </div>

          <div class="filter">
            <span style="padding-right: 10px">盘盈盘亏</span>
            <el-select v-model="params.isCorrect" placeholder="请选择">
              <el-option v-for="item in status_arr" :key="item.value" :label="item.name" :value="item.value"></el-option>
            </el-select>
          </div>
  
          <div class="filter">
            <div style="padding-right: 10px">任务单号</div>
            <el-input
              v-model="params.stocktakingTaskNo"
              placeholder="输入关键字"
              style="width: 190px"
              @input="input"
            ></el-input>
          </div>

          <div style="display: flex">
              <div class="btn1" @click="search">查询</div>
              <div class="btn1" @click="clearAll">清空</div>
          </div>
        </div>
        <div class="addBtn">新增任务</div>
      </div>
      <div class="tableVue">
        <div class="tableList">
          <div class="thVue">
            <div class="th">任务单号</div>
            <div class="th">盘点门仓</div>
            <div class="th">盘点商品</div>
            <div class="th">库存数量</div>
            <div class="th">盘点数量</div>
            <div class="th">创建人</div>
            <div class="th">盘盈盘亏</div>
            
            <div class="th">创建时间</div>
            <div class="th">操作</div>
          </div>
          <div class="tdVue">
            <div class="tdItem" v-for="(item, index) in list" :key="index">
              <div class="td line-1">{{ item.stocktakingTaskNo }}</div>
              <div class="td">{{ item.storeName }}</div>
              <div class="td">{{ item.categoryStr }}</div>
  
              <div class="td">{{ item.actualStock }}</div>
              <div class="td">{{ item.expectStock }}</div>
              <div class="td">{{ item.createName }}</div>
              <div class="td" :style="{ color: item.isCorrect ? '#72B597' : '#E79199'}">{{ item.isCorrect ? "不盈不亏" : "有盘盈/盘亏" }}</div>
          
              <div class="td">{{ item.createTime }}</div>
              <div class="td">
                <span style="color: #2752DD; cursor: pointer;" @click="toDetail(item.id)">详情</span>
              </div>
            </div>
          </div>
          <div class="paginationVue">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="params.limit"
              @current-change="pageChange"
            ></el-pagination>
          </div>
        </div>
      </div>
    <taskDetail :drawer="iaTask" @beforeClose="iaTask=false" ref="child" @toDelete="toDelete"></taskDetail>
    </div>
  </template>
  
  
<script>
import { stocktakingList } from "@/api/msg"
import taskDetail from "./taskDetail.vue";
import { listStore } from '@/api/commercial';

  export default {
  components: { taskDetail },
    data() {
      return {
        params: {
          status: 1,
          limit: 20,
          page: 1,
          storeId: "",
          stocktakingTaskNo: "",
          type: ""
        },
        storeId: "",
        storeList: [
          { name: '仓库', id: 1, children: [] },
          { name: '门店', id: 2, children: [] },
        ],
        status_arr: [{ name: "全部", value: null },  { name: "有盘盈、盘亏", value: false },  { name: "不盈不亏", value: true }],
        list: [],
        options: [],
        value: "",
        total: 0,
        iaTask: false,
      };
    },
    created(){
      this.getList()
      this.getStoreList();

    },
    methods: {
      search() {
         this.params.page = 1;
         this.getList();
      },
      clearAll() {
          this.params = {
            stocktakingTaskNo: '',
              limit: 15,
              page: 1,
              storeId: "",
              status: 1,
              type: "",
          };
          this.storeId = ""
           this.params.page = 1;
          this.getList();
      },
      input() {
        if (!this.params.stocktakingTaskNo) {
          this.params.page = 1;
          this.getList();
        }
      },
      toDetail(id){
        this.iaTask = true
        this.$refs.child.getDetail(id)
      },
      toDelete(id){
        this.$confirm('确定删除该盘点任务吗?', '删除盘点任务', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          stocktakingDel({
            id: id
          }).then(res=>{
            this.$message({
              type: 'success',
              message: '删除成功!',
            });
            this.params.page = 1
            this.getList()
          })
        })
     },
     getStoreList() {
      // 类型(1仓库 2门仓)
      listStore({ type: 1, page: 1, limit: 999 }).then((res) => {
        this.storeList[0].children = res.list;
      });
      listStore({ type: 2, page: 1, limit: 999 }).then((resr) => {
        this.storeList[1].children = resr.list;
      });
    },
      getList(){
        stocktakingList(this.params).then(res=>{
            this.list = res.list
            this.total = res.total
            console.log("盘点已完成列表", this.list)
        })
    },
    handleTransferOutStoreChange(val) {
      this.storeId = val
      this.params.type = val[0];
      this.params.storeId = val[1];
    },
      pageChange(e) {
        console.log(e);
        this.params.page = e;
        this.getList();
      },
    }
  };
  </script>
  
  
  <style lang="scss">
  .resultPage {
    width: 100%;
    height: calc(100vh - 186px);
    background: #fff;
    .filterVue {
      width: 100%;
      height: 62px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px;
      .filter {
        display: flex;
        align-items: center;
        padding-right: 30px;
      }
      .btn1 {
        width: 60px;
        height: 32px;
        border-radius: 4px;
        line-height: 32px;
        text-align: center;
        background: #2561ef;
        color: #fff;
        margin-right: 10px;
        cursor: pointer;
      }
      .addBtn {
          width: 100px;
          height: 32px;
          border-radius: 4px;
          line-height: 32px;
          text-align: center;
          background: #2561ef;
          color: #fff;
          margin-right: 10px;
          cursor: pointer;
      }
    }
    .tableVue {
      flex: 1;
      height: calc(100vh - 186px - 62px);
      .thVue {
        width: 100%;
        display: flex;
        height: 70px;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        .th {
          flex: 1;
          color: #333333;
          font-weight: 600;
          text-align: center;
        }
        .th:nth-last-child(1) {
          width: 250px;
        }
      }
      .tdVue {
        width: 100%;
        height: calc(100vh - 186px - 62px - 70px - 60px);
        overflow-y: scroll;
        .tdItem {
          width: 100%;
          height: 50px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #f5f5f5;
          .td {
            flex: 1;
            text-align: center;
          }
          .td:nth-last-child(1) {
            width: 250px;
          }
        }
      }
      .tdVue::-webkit-scrollbar {
        width: 0;
      }
      .paginationVue {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  </style>